<template>
<view>
  <!-- 搜索框 -->
<Search></Search>
<!-- 轮播图 -->

		<u-swiper :list="list"  name="image_src"  height="340"></u-swiper>
    <!-- 导航 -->
<view class="nav u-flex">
  <navigator v-for="item in nav" :key="item.name" class="u-flex-1 u-p-15">
    <u-image mode='widthFix' width='100%' :src='item.image_src'></u-image>
  </navigator>
</view>
<!-- 楼层 -->
  <!-- 4 楼层 -->
    <view class="floor">
      <view
        class="floor-group"
        v-for="item1 in floorList"
        :key="item1.floor_title.name"
      >
        <view class="floor-title">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u-image>
        </view>
        <view class="floor-list">
          <navigator
            v-for="item2 in item1.product_list"
            :key="item2.name"
          >
            <u-image
              width="100%"
              height="100%"
              mode="scaleToFill"
              :src="item2.image_src"
            ></u-image>
          </navigator>
        </view>
      </view>
    </view>
<view>

</view>
</view>

</template>

<script>
	export default {
		data() {
			return {
        //用于接收轮播图数据数组
        list:[],
        //导航
        nav:[],
        floorList:[]
      }
		},
     onLoad() {
    // 获取轮播数据
    this.getSwiper();
    //导航
    this.getnav()
    // 楼层
    this.getFooter()
  },
    methods:{
  //  获取轮播图 
  async getSwiper(){

this.list=await this.$u.http.get("/home/swiperdata")
  } ,

//获取导航
  async getnav(){

this.nav=await this.$u.http.get("/home/catitems")
  },
  //楼层
 async getFooter(){
  
    this.floorList=await this.$u.http.get("/home/floordata")
  }
  }
    }
	
</script>

<style lang="scss" scoped  >
.floor-group {
  margin-top: 10rpx;
}
.floor-list {
  padding: 0 12rpx;

  /* 清除浮动 */
  overflow: hidden;
  navigator {
    float: left;
  }
  // 第一张图片
  navigator:nth-child(1) {
    width: 232rpx;
    height: 386rpx;
  }
  /* 后四张图片 */
  navigator:nth-last-child(-n + 4) {
    width: 233rpx;
    height: 188rpx;
  }
  /* 2 和 4 图片 */
  navigator:nth-child(2),
  navigator:nth-child(4) {
    margin: 0 15rpx;
  }

  /* 后两张图片 */
  navigator:nth-last-child(-n + 2) {
    margin-top: 10rpx;
  }
}
</style>